<template>
  <van-row>
    <van-nav-bar
      title="客户订单数量统计表"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/statistics')"
    />
    <van-field name="radio" label="时间范围">
      <template #input>
        <van-radio-group v-model="query.customerAmountType" direction="horizontal" @change="getCustomerQuantityData">
          <van-radio name="0">当月</van-radio>
          <van-radio name="1">当年</van-radio>
          <van-radio name="2">全部</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="排序">
      <template #input>
        <van-radio-group v-model="query.sortType" direction="horizontal" @change="getCustomerQuantityData">
          <van-radio name="0">数量最多</van-radio>
          <van-radio name="1">数量最少</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <ve-histogram :extend="extend" :data="customerQuantityData" :settings="chartSettings" />
  </van-row>
</template>

<script>

import { customerQuantity } from '@/api/statistics/statistics'

export default {
  name: 'CustomerQuantity',
  data() {
    return {
      query: {
        customerQuantityType: '0',
        sortType: '0'
      },
      chartSettings: {},
      extend: {
        // x轴的文字倾斜
        // 'xAxis.0.axisLabel.rotate': 45,
        yAxis: {
          // 是否显示y轴线条
          axisLine: {
            show: true
          },
          // 纵坐标网格线设置，同理横坐标
          splitLine: {
            show: false
          },
          // 线条位置
          position: 'left'
        },
        xAxis: {
          axisLine: {
            show: true
          }
        },
        series: {
          label: { show: true, position: 'top' }
        }
      },
      customerQuantityData: {
        columns: ['客户名称', '数量'],
        rows: []
      }
    }
  },
  mounted() {
    this.getCustomerQuantityData()
  },
  methods: {
    getCustomerQuantityData() {
      customerQuantity({ type: this.query.customerQuantityType, sortType: this.query.sortType }).then(resp => {
        this.customerQuantityData.rows = []
        resp.data.forEach(item => {
          this.customerQuantityData.rows.push({ '客户名称': item.customerName, '数量': item.quantity })
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
